﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>简易留言板</h2>
    <input type="text" placeholder="请输入内容" size="30" id="msg">
    <input type="button" value="留言" id="btn">
    <div id="msg-div"></div>

    //引用组件名，还可以传递参数，以及通讯等等
    <fruit-select></fruit-select>

    <p class="name" v-text="author"></p>
    <a href="#" v-html="authorHtml"></a>


    <script>
        //let 定义块级变量
        let oBtn = document.getElementById('btn');
        let msg = document.getElementById('msg');
        let content = document.getElementById('msg-div');
        oBtn.onclick = () => {
            let ovalue = msg.value;
            let ali = document.createElement('p');
            //ES6模板字符串
            //多行表达式
            ali.innerHTML = `${ovalue}<span style="color:red;">
                                        删除</span>`;

            var aspan = content.getElementsByTagName('p');
            if (aspan.length > 0) {
                content.insertBefore(ali, aspan[0]);
            } else {
                content.appendChild(ali);
            }
            msg.value = '';
            var oSpan = content.getElementsByTagName('span');
            for (let i = 0; i < oSpan.length; i++) {
                //ES6箭头函数
                oSpan[i].onclick = function () {
                    content.removeChild(this.parentNode);//注意this的指向
                };
            }
        };

        Vue.component("fruit-select", {
            template: `<section>
                <section>
                    <section>
                        <input type="text" />
                        <input type="button" value="Go" />
                        <span></span>
                    </section>
                    <ul>
                        <li>苹果</li>
                        <li>香蕉</li>
                    </ul>
                </section>
            </section> `,
        });
    </script>
</body>
</html>